<template>
  <div class="loading" v-if="showLoading">
    <img src="@/assets/loading.png" alt="" />
  </div>
</template>

<script>
export default {
  props: {
    showLoading: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style scoped lang="scss">
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 13.333vw;
    height: 13.333vw;
    animation: rotate 1.5s linear infinite;
  }
}
</style>
